<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>登录</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="../../../plugins/fontawesome-free/css/all.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="../../../dist/css/icon.css">
    <!-- icheck bootstrap -->
    <link rel="stylesheet" href="../../../plugins/icheck-bootstrap/icheck-bootstrap.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="../../../dist/css/adminlte.min.css">
    <!-- Google Font: Source Sans Pro -->
    <link href="../../../dist/css/fonts.css" rel="stylesheet">

    <link rel="stylesheet" href="../../../plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css">
</head>
<style type="text/css">

</style>

<body class="hold-transition login-page" style="position: relative;">
    <div class="login-box" style="margin-top: -20px;">
        <div class="login-logo">
            <a href="">计算机维护队</a>
        </div>
        <!-- /.login-logo -->
        <div class="card">
            <div class="card-body login-card-body">
                <form action="" method="post">
                    <div class="input-group mb-3">
                        <input type="tel" class="form-control" name="tel" placeholder="请输入手机号码" id="tel">
                        <div class="input-group-append">
                            <button type="button" class="btn  bg-gradient-primary btn-flat"
                                id="getCodeOn">获取验证码</button>
                            <button type="button" class="btn  bg-gradient-primary btn-flat disabled"
                                style="display: none;" id="getCodeOff"></button>
                        </div>
                    </div>
                    <div class="input mb-3">
                        <input type="text" class="form-control" name="checkCode" placeholder="验证码">

                    </div>
                    <div class="social-auth-links text-center mb-3">
                        <button type="submit" class="btn btn-primary btn-block" id="login">登录</button>
                    </div>
                </form>
                <a href="/member/login" class="text-center">管理员登录</a>
                <!-- /.social-auth-links -->
            </div>
            <!-- /.login-card-body -->
        </div>

    </div>

    <footer style="position: absolute;top:100%;margin-top: -30px; color:#a59099">
        @CopyRight2020华南农业大学计算机维护队 粤ICP备20026612号
    </footer>
    <!-- /.login-box -->

    <!-- jQuery -->
    <script src="../../../plugins/jquery/jquery.min.js"></script>
    <!-- Bootstrap 4 -->
    <script src="../../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- AdminLTE App -->
    <script src="../../../dist/js/adminlte.min.js"></script>
    <script src="../../../plugins/sweetalert2/sweetalert2.min.js"></script>

    <script>
        const Toast = Swal.mixin({
            toast: true,
            showConfirmButton: false,
            timer: 1500
        });
        let re_tel = /^1\d{10}$/;
        let re_checkCode = /^\d{6}$/;
        $("#getCodeOn").on("click", function (data) {
            // console.log($("#tel").val()) //string
            let tel = $("#tel").val()
            if (!re_tel.test(tel)) {
                Toast.fire({
                    icon: 'error',
                    title: ' 手机号码格式不正确'
                })
                return false;
            } else {

                $.ajax({
                    type: 'POST',
                    url: '/repair/getSMSCode',
                    async: true,
                    data: {
                        "telephone": tel
                    },
                    dataType: 'json',
                    contentType: "application/x-www-form-urlencoded",
                    success: function (res) {
                        console.log("成功" + JSON.stringify(res))
                        console.log(res.statusCode)
                        if (res.statusCode === "200") {
                            Toast.fire({
                                icon: 'success',
                                title: ' 验证码已发送'
                            })
                        } else {
                            Toast.fire({
                                icon: 'error',
                                title: ' 网络异常，请重试'
                            })
                        }
                    },
                    error: function (err) {
                        console.log("失败" + JSON.stringify(err))
                    }
                });
                // if ($.cookie("total") != undefined && $.cookie("total") != 'NaN' && $.cookie("total") != 'null') {//cookie存在倒计时
                //     $.cookie("total",60);
                //     timedown(60)
                // } else {//cookie 没有倒计时
                //     $("#getCodeOn").show();
                //     $("#getCodeOff").hide();
                //     $("#getCodeOn").text("重新发送");
                // }

                function timedown(time) {
                    if (time == "underfine") {
                        time = 60
                    }
                    time = time - 1
                    if (time >= 0) {
                        console.log(time)
                        $("#getCodeOn").hide();
                        $("#getCodeOff").show();
                        $("#getCodeOff").text(time + "秒后重新发送");
                        setTimeout(function () {
                            timedown(time)
                        }, 1000)
                    } else {
                        $("#getCodeOn").show();
                        $("#getCodeOff").hide();
                        $("#getCodeOn").text("重新发送");
                    }
                }
            }
        })
        $("#login").on("click", function (data) {
            let tel = $("form").serializeArray()[0].value
            let checkCode = $("form").serializeArray()[1].value
            if (!re_tel.test(tel)) {
                Toast.fire({
                    icon: 'error',
                    title: ' 手机号码格式不正确'
                })
                return false;
            } else {
                if (!re_checkCode.test(checkCode)) {
                    Toast.fire({
                        icon: 'error',
                        title: ' 验证码格式不正确'
                    })
                    return false;
                } else {
                    $.ajax({
                        type: 'POST',
                        url: '/repair/login',
                        async: true,
                        data: {
                            "telephone": tel,
                            "Pwd": checkCode,
                            "method": "SMS"
                        },
                        dataType: 'json',
                        contentType: "application/x-www-form-urlencoded",
                        success: function (res) {
                            console.log(JSON.stringify(res))
                            if (res.statusCode === "200") {
                                Toast.fire({
                                    icon: 'success',
                                    title: ' 登陆成功'
                                })
                                setTimeout(function () { window.location.href = "./repair" }, 1000);
                                return false
                            } else {
                                Toast.fire({
                                    icon: 'error',
                                    title: ' 验证码输入错误'
                                })
                                return false
                            }
                            // 跳转网页
                        },
                        error: function (err) {
                            console.log(JSON.stringify(err))
                            return false
                        }
                    });
                }
            }
            return false
        })
    </script>
</body>

</html>